<template>
  <div class="container">
    <img src="https://yanxuan.nosdn.127.net/20190624_99topic/0be3d04593a222802e44266d711549a6.jpg" class="banner">

    <div class="swiper-wrap">
      <div class="swiper-context-wrap">
        <div class="header"><strong class="J_newestLabel">专区新品 </strong><span class="J_title"> 好商品，超值价</span></div>
        <div class="swiper-context">
          <div class="swiper-context-slide">
            <div class="pic">
              <img
                src="https://yanxuan-item.nosdn.127.net/71f38d9e1892c234ef0e7210fa944db8.png?imageView&thumbnail=190x190&quality=95">
            </div>
            <div class="context">有效抑菌配方 免洗净手喷雾10ml/20ml</div>
            <p class="price">超值价:￥9.8</p>
            <button>立即加购</button>
          </div>
        </div>
      </div>
    </div>

    <div class="goods-wrap">
      <div class="goods">
        <ul class="goods-nav">
          <li>9.9元</li>
          <li>19.9元</li>
          <li>29.9元</li>
          <li>39.9元</li>
          <li>99.9元</li>
        </ul>
      </div>
      <div class="goods-list-wrap">
        <div class="goods-list">
          <div class="img-desc"><img class="img"
              src="https://yanxuan.nosdn.127.net/ab7c41444bfaeb7b27332d3cdc2365e7.jpg?imageView&amp;thumbnail=670x172&amp;quality=95&amp;type=webp">
          </div>
          <div class="goods-list-item-wrap">

            <div class="goods-list-item">
              <div class="div">
                <img
                  src="https://yanxuan-item.nosdn.127.net/3c7edae8518d41b7dc82e50680108a1f.jpg?imageView&amp;thumbnail=280x280&amp;quality=95&amp;type=webp">
                <span>好评率 99.9%</span>
                <div class="item-wrap">
                  <div class="title">省水/插袋/双面化妆棉 80-210片 卸妆 湿敷</div>
                  <div class="shape">
                    <div class="line"><i></i></div>
                    <div class="text">专区特供新研发超值商品</div>
                    <div class="tags"> </div>
                    <div class="price-a">
                      <p class="p1">￥9.8</p>&nbsp; <p class="p2">升级后超值价</p>
                    </div>
                    <button>立即加购</button>
                  </div>
                </div>
              </div>
              <div class="review"><div class="text">100%日本进口棉，柔软细腻不易起毛，节水省水，特别适合用来湿敷。</div></div>
            </div>

            <div class="goods-list-item">
              <div class="div">
                <img
                  src="https://yanxuan-item.nosdn.127.net/3c7edae8518d41b7dc82e50680108a1f.jpg?imageView&amp;thumbnail=280x280&amp;quality=95&amp;type=webp">
                <span>好评率 99.9%</span>
                <div class="item-wrap">
                  <div class="title">省水/插袋/双面化妆棉 80-210片 卸妆 湿敷</div>
                  <div class="shape">
                    <div class="line"><i></i></div>
                    <div class="text">专区特供新研发超值商品</div>
                    <div class="tags"> </div>
                    <div class="price-a">
                      <p class="p1">￥9.8</p>&nbsp; <p class="p2">升级后超值价</p>
                    </div>
                    <button>立即加购</button>
                  </div>
                </div>
              </div>
              <div class="review"><div class="text">100%日本进口棉，柔软细腻不易起毛，节水省水，特别适合用来湿敷。</div></div>
            </div>

            <div class="goods-list-item">
              <div class="div">
                <img
                  src="https://yanxuan-item.nosdn.127.net/3c7edae8518d41b7dc82e50680108a1f.jpg?imageView&amp;thumbnail=280x280&amp;quality=95&amp;type=webp">
                <span>好评率 99.9%</span>
                <div class="item-wrap">
                  <div class="title">省水/插袋/双面化妆棉 80-210片 卸妆 湿敷</div>
                  <div class="shape">
                    <div class="line"><i></i></div>
                    <div class="text">专区特供新研发超值商品</div>
                    <div class="tags"> </div>
                    <div class="price-a">
                      <p class="p1">￥9.8</p>&nbsp; <p class="p2">升级后超值价</p>
                    </div>
                    <button>立即加购</button>
                  </div>
                </div>
              </div>
              <div class="review"><div class="text">100%日本进口棉，柔软细腻不易起毛，节水省水，特别适合用来湿敷。</div></div>
            </div>


          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  background: #213762;

  .banner {
    width: 100%;
  }

  .swiper-wrap {
    position: relative;
    width: 355px;
    height: 272px;
    margin: -0.7rem auto 0;
    background: #fff;
    border-radius: 0.16rem;
    overflow: hidden;

    // -webkit-box-sizing: border-box;
    // box-sizing: border-box;
    .swiper-context-wrap {
      width: 355px;
      height: 272px;
      background-color: #fff;
      border-radius: 10px;

      .header {
        height: 0.89rem;
        line-height: .89rem;
        font-size: .24rem;
        white-space: nowrap;
        padding: 0 0.25rem;

        strong {
          font-size: 16px;
          font-weight: 600;
        }
      }

      .swiper-context {
        width: 98%;
        height: 4.55rem;
        margin: auto;

        .swiper-context-slide {
          width: 110px;
          // height: auto;
          height: 197px;
          border: 0.01rem solid #d9d9d9;
          background: #fff;
          border-radius: 0.08rem;
          overflow: hidden;

          .pic {
            width: 100%;
            height: 95px;
            margin: 0 auto;
            overflow: hidden;
            background: #fafafa;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .context {
            margin: 0.07rem 0 0 0.1rem;
            font-size: 12px;
          }

          .price {
            margin: 0.07rem 0 0 0.1rem;
            font-size: 14px;
            color: #e08c35;
            font-weight: 700;
          }

          button {
            margin: 0.07rem 0 0 0.1rem;
            width: 1.62rem;
            height: 0.4rem;
            line-height: .4rem;
            color: #fff;
            background: #e08c35;
            border-radius: 0.21rem;
            font-size: .22rem;
            border: none;
          }
        }
      }
    }
  }

  .goods-wrap {
    width: 355px;
    background-color: #fff;
    border-radius: 10px;
    margin: 10px auto 0;

    .goods {
      width: 355px;
      margin: auto;

      .goods-nav {
        width: 345px;
        height: 50px;
        border-bottom: 1px solid #ccc;
        margin: auto;

        li {
          width: 69px;
          height: 24px;
          text-align: center;
          line-height: 24px;
          border-radius: 10px;
          float: left;
          font-size: 14px;
          margin: 13px 0 0;

          &:nth-child(1) {
            background-color: #e08c35;
            color: #fff;
          }
        }

      }
    }

    .goods-list-wrap {
      width: 355px;
      margin: auto;
      background-color: #fff;

      .goods-list {
        .img-desc {
          width: 335px;
          height: 86px;
          border-radius: 10px;
          overflow: hidden;
          margin: 10px auto 0;

          .img {
            width: 335px;
            height: 86px;
            // margin-top: 0.2rem;
            background: #fff;
          }


        }
      }

      .goods-list-item-wrap {
        width: 355px;
        height: 900px;
        // background-color: #f0f;
        margin: 10px auto;

        .goods-list-item {
          width: 339px;
          height: 215px;
          margin: auto;
          overflow: hidden;

          .div {
            width: 319px;
            height: 140px;
            margin: auto;
            // background-color: #f0f;
            // display: flex;
            // justify-content: space-between;
            // flex-wrap: wrap;
            position: relative;

            img {
              width: 140px;
              height: 140px;
              // margin-left: 5px;
              float: left;
            }

            span {
              display: block;
              width: 90px;
              height: 18px;
              background: hsla(0, 0%, 100%, .9);
              text-align: center;
              border-radius: 0 8px 8px 0;
              position: absolute;
              top: 7px;
              left: 0;
              font-size: 12px;
              z-index: 2;
            }

            .item-wrap {
              width: 170px;
              height: 140px;
              float: right;

              .text {
                font-size: .24rem;
                margin-top: 8px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
                word-wrap: break-word;
                margin-left: 10px;
              }

              .tags {
                font-size: 0;
                height: 0.38rem;
                overflow: hidden;
              }

              .price-a {

                color: #e08c35;

                margin-top: -0.05rem;
                margin-left: 10px;

                .p1 {
                  font-size: .48rem;
                  font-weight: 700;
                }

                .p2 {
                  font-size: 12px;
                  margin-top: 6px;
                }

                p {
                  float: left;
                  font-weight: 100;
                  font-size: 12px;
                }
              }

              .title {
                font-weight: 700;
                font-size: 15px;
                line-height: .4rem;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                word-wrap: break-word;
                margin-top: 8px;
              }

              button {
                width: 103px;
                height: 28px;
                line-height: .56rem;
                color: #fff;
                background: #e08c35;
                border-radius: 0.5rem;
                font-size: .24rem;
                font-weight: 700;
                text-align: center;
                margin-top: 5px;
                border: none;
              }
            }

          }
          .review{
            width: 339px;
            height: 56px;
            margin: 10px auto;
            border-bottom: 1px solid #7f7f7f;
            .text{
              color: #7f7f7f;
              font-size: 12px;
              line-height: 18px;
              height: 36px;
              padding: 8px;
            }
          }
        }
      }
    }
  }
}</style>